<ion-header>
  <ion-toolbar>
    <ion-title style='text-align:center'>登录</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- <ion-segment>
    <ion-segment-button value="vcd" (click) = "clickvcd()">
      <ion-label>验证码登录</ion-label>
    </ion-segment-button>
    <ion-segment-button value="pwd" (click) = "clickpwd()">
      <ion-label>密码登录</ion-label>
    </ion-segment-button>
  </ion-segment> -->
  <!-- <div *ngIf="segment == 1">
    <form>
      <ion-list>
        <ion-item lines="none">
          <ion-icon name="phone-portrait-sharp"></ion-icon>
          <ion-label>手机号</ion-label>
        </ion-item>
        <ion-item>
          <ion-input name="phone" type="number" placeholder="仅支持中国大陆手机号" required
              pattern="^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,3,5-9]))\d{8}$" [(ngModel)]="phone"> 
          </ion-input>
        </ion-item>
      </ion-list>
      <div padding-horizontal>
        <ion-button type="submit" expand="full" color="primary" (click) = "sendVerifyCode()">
            获取验证码
        </ion-button>
      </div>
      <a href="/register" style="padding-inline-start: 40%;">注册账号</a>
    </form>
  </div>

  <div *ngIf="segment == 2">
    <form>
      <ion-list>
        <ion-item lines="none">
          验证码已发送到<div style="color: rgb(19, 106, 177);">{{phone}}</div>
        </ion-item>
        <ion-item lines="none"> 
          请输入验证码<div style="color: rgb(19, 106, 177);">{{verifyCode.code}}</div>
        </ion-item>
        <ion-item>
          <ion-input name="code" type="text" placehodler="四位验证码" 
          [(ngModel)]="verifyCode.confirmCode" (ionChange)="checkVerifyCode($event)"></ion-input>
        </ion-item>
      </ion-list> 
      <ion-button type="submit" expand="full" color="primary" (click) = "resend()">
        重新获取
      </ion-button>
    </form>
  </div> -->


  <div>
    <form>
      <ion-list>
        <ion-item lines="none">
          <ion-icon name="person-sharp"></ion-icon>
          <ion-label>账号</ion-label>
        </ion-item>
        <ion-item>
          <ion-input name="loginToken" type="text" placeholder="请输入账号/手机号/邮箱" required="true" [(ngModel)]="loginToken" >
            </ion-input>
        </ion-item>
        <ion-item lines="none">
          <ion-icon name="lock-closed-sharp"></ion-icon>
          <ion-label>密码</ion-label>
        </ion-item>
        <ion-item>
          <ion-input name="password" type="password" placeholder="请输入密码" required="true" [(ngModel)]="passwordToken">
          </ion-input>  
        </ion-item>
        <!-- <ion-list>
          <ion-radio-group (ionChange)="checkRole($event)">
            <ion-list-header>
              <ion-label>请选择登陆方式</ion-label>
            </ion-list-header>
        
            <ion-item>
              <ion-label>账号</ion-label>
              <ion-radio slot="start" value="1" ></ion-radio>
            </ion-item>
        
            <ion-item>
              <ion-label>手机号</ion-label>
              <ion-radio slot="start" value="2" ></ion-radio>
            </ion-item>

            <ion-item>
              <ion-label>邮箱</ion-label>
              <ion-radio slot="start" value="3" ></ion-radio>
            </ion-item>
          </ion-radio-group>
        </ion-list> -->
        <!-- <ion-list>
          <ion-radio-group (ionChange)="checkRole($event)">
            <ion-list-header>
              <ion-label>请选择身份</ion-label>
            </ion-list-header>
        
            <ion-item>
              <ion-label>学生</ion-label>
              <ion-radio slot="start" value="0" ></ion-radio>
            </ion-item>
        
            <ion-item>
              <ion-label>教师</ion-label>
              <ion-radio slot="start" value="1" ></ion-radio>
            </ion-item>
          </ion-radio-group>
        </ion-list> -->
      </ion-list>
      <div padding-horizontal>
        <ion-button type="submit" expand="full" color="primary" (click)="check()">
            登录
        </ion-button>
      </div>
      <ion-grid>
        <ion-row>
          <ion-col>
            <a style="padding-inline-start: 45%;" href="/register">注册账号</a>
          </ion-col>
          <ion-col>
            <a style="padding-inline-end: 45%;" href="/forget-pwd">忘记密码</a>
          </ion-col>
        </ion-row>
        <ion-row>
          初始密码：123456
        </ion-row>
      </ion-grid>
    </form>
  </div>
</ion-content>
